import { useState, useEffect } from "react";
import { Button, Modal } from "antd";
import Iconfont from "@/components/IconFont";
import CommonTable from "@/components/CommonTable";
import CommonLoading from "@/components/CommonLoading";
import { getPxMm, isJSON } from "@/utils/utils.jsx";
import DragDropModal from "./DragDropModal";
import PreviewModal from "./PreviewModal";
import { getDetailOp, getCountOp, deleteOp, getShopListOp, getGoodsCategoryByUuid, isEnableDisable } from "../service";
import { cloneDeep } from "lodash";
import { message } from "antd";

let source;
const sizeScale = getPxMm();

export default ({ data, refreshList }) => {
	const [loading, setLoading] = useState(false);
	const [visible, setVisible] = useState(false);
	const [isPreview, setPreview] = useState(false); //预览弹窗
	const [shopList, setShopList] = useState([]); //平台网店列表
	const [attrList, setAttrList] = useState([]); //系统商品属性列表

	const columns = [
		{
			title: "序号",
			dataIndex: "index",
			key: "index",
			width: 60,
			render: (t, r, i) => i + 1
		},
		{
			title: "模板名称",
			dataIndex: "templateName",
			key: "templateName",
			width: 150
		},
		{
			title: "模板尺寸(mm）",
			dataIndex: "areaCode",
			key: "areaCode",
			width: 100,
			render: (text, { totalWidth, totalHeight }) => `${totalWidth} * ${totalHeight}`
		},
		{
			title: "状态",
			dataIndex: "status",
			key: "status",
			width: 100,
			render: (text, { totalWidth, isDefault }) => {
				if (isDefault) {
					return <span>{text == 1 ? <span>已启用</span> : <span>已禁用</span>}</span>;
				} else {
					return "/";
				}
			}
		},
		{
			title: "操作",
			dataIndex: "address",
			key: "address",
			fixed: "right",
			width: 120,
			render: (text, record) => (
				<span className="opera-span-common">
					<span onClick={() => getDetailFunc(record.id, 1)}>编辑</span>
					<i>|</i>
					<span onClick={() => getDetailFunc(record.id, 2)}>预览</span>
					<i>|</i>
					<span onClick={() => getDetailFunc(record.id, 3)}>复制</span>
					{record.isDefault ? (
						""
					) : (
						<>
							<i>|</i>
							<span onClick={() => handleJudgeFunc(record.id)}>删除</span>
						</>
					)}
					{record.isDefault ? (
						<>
							<i>|</i>
							<span onClick={() => handleEnableDisable(record)}>{record.status == 1 ? "禁用" : "启用"}</span>
						</>
					) : (
						""
					)}
				</span>
			)
		}
	];

	useEffect(() => {
		if (visible) {
			if (!shopList.length) {
				getShopList();
			}
		}
	}, [visible]);

	useEffect(() => {
		if (visible || isPreview) {
			if (!attrList.length) {
				getAttrList();
			}
		}
	}, [isPreview, visible]);

	//系统商品属性列表
	const getAttrList = async () => {
		const { success, data = [] } = await getGoodsCategoryByUuid();
		if (success) {
			//   const arr = cloneDeep(data).filter((item) => item.status == 1);
			const arr = cloneDeep(data);
			arr.splice(2, 0, {
				//添加商品成分
				attributeName: "商品成分",
				id: -1,
				goodsCategoryPk: -1,
				type: 1,
				status: 1
			});
			setAttrList(arr);
		}
	};

	//获取平台网店列表
	const getShopList = async () => {
		const res = await getShopListOp({
			current: 1,
			size: 100
		});
		if (res.success) {
			const {
				data: { records }
			} = res;
			setShopList(records || []);
		}
	};

	//请求数据源
	const getDetailFunc = async (id, type) => {
		setLoading(true);
		const { success, data } = await getDetailOp({ id });
		if (success) {
			source = {
				...data,
				templateValue: data.templateValue && isJSON(data.templateValue) ? JSON.parse(data.templateValue) : []
			};
			if (type == 2) {
				setPreview(true);
			} else {
				setVisible(type);
			}
		}
		setLoading(false);
	};

	//默认模板启用禁止用
	const handleEnableDisable = async record => {
		setLoading(true);
		const { success, msg } = await isEnableDisable({
			id: record.id,
			status: record.status == 1 ? 2 : 1
		});
		if (success) {
			message.success(msg);
			refreshList();
		}
		setLoading(false);
	};

	const handleJudgeFunc = async id => {
		setLoading(true);
		const { success, data } = await getCountOp({ id });
		if (success) {
			Modal.confirm({
				centered: true,
				icon: <Iconfont type="iconjingshi" />,
				content: data ? "该合格证模板已在商品渠道页面设置为默认合格证，是否确认删除此合格证模板？" : "是否确认删除此合格证模板？",
				onOk() {
					handleDeleteFunc(id);
				}
			});
		}
		setLoading(false);
	};

	const handleDeleteFunc = async id => {
		setLoading(true);
		const { success } = await deleteOp({ id });
		if (success) {
			refreshList();
		}
		setLoading(false);
	};

	//表格props
	const TableProps = {
		data,
		columns
	};

	//拖拽弹窗 props
	const DragDropModalProps = {
		visible,
		source,
		shopList,
		attrList,
		sizeScale,
		handleOk() {
			refreshList(); //刷新主页列表
		},
		handleCancel() {
			source = undefined;
			setVisible(false); //关闭 弹窗
		}
	};

	//预览弹窗 props
	const PreviewModalProps = {
		source,
		attrList,
		sizeScale,
		visible: isPreview,
		handleCancel() {
			source = undefined;
			setPreview(false); //关闭 弹窗
		}
	};

	return (
		<>
			<div className="common-table-header-btn">
				<Button key="create" onClick={() => setVisible(4)}>
					新建合格证模板
				</Button>
			</div>
			<CommonTable {...TableProps} />
			{visible && <DragDropModal {...DragDropModalProps} />}
			{isPreview && <PreviewModal {...PreviewModalProps} />}
			<CommonLoading loading={loading} />
		</>
	);
};
